<template>
  <view class="page-body flex-col">
    <SearchHead
      @loadData="loadData"
      @resetSearch="resetSearch"
      :tabsList="tabsList"
      :searchForm.sync="searchForm"
    ></SearchHead>
    <scroll-view scroll-y class="goods-scroll">
      <div class="goods-list" v-if="pageData.list.length">
        <div class="goods-item" v-for="item in pageData.list" :key="item.id">
          <div class="flex-y-center u-m-b-32">
            <div class="user-img flex-w-1 flex-y-center">
              <image :src="item.su_avatar" mode="aspectFill"></image>
              <div class="flex-w-1 u-line-1 font-w-600 u-font-30">{{ item.su_name }}</div>
            </div>

            <div class="color-999 u-font-24">
              {{ $utils.turnDate(item.created_at * 1000, "yyyy-mm-dd") }}
            </div>
          </div>

          <div class="flex-y-center goods-xing">
            <ul class="flex-y-center">
              <li
                v-for="(item, i) in item.score - 0"
                :key="i"
                class="iconfont icon-collection-fill"
              ></li>
            </ul>
            <div class="icon-shu"></div>
            <div class="color-999 u-font-24 flex-w-1 u-line-1">
              {{ item.goods_name }}
            </div>
          </div>

          <div class="goods-content">
            <u-read-more :text-indent="0">
              {{ item.content }}
            </u-read-more>
          </div>

          <div class="goods-pics">
            <image
              v-for="(pic, i) in item.pic_list"
              :key="i"
              :src="pic"
              mode="aspectFill"
              text-indent="0"
              close-text="查看更多"
            ></image>
          </div>
        </div>
        <u-loadmore :status="pageData.loadmoreStatus"></u-loadmore>
      </div>

      <u-empty v-else mode="data"></u-empty>
    </scroll-view>
  </view>
</template>
<script>
import { commentList } from "@/api/service-home";
import SearchHead from "./components/search-head.vue";
export default {
  components: {
    SearchHead,
  },
  data() {
    return {
      pageData: {
        page: 1,
        pageSize: 10,
        list: [],
        loadmoreStatus: "loadmore",
      },
      searchForm: {
        name: "",
        orderby: 0,
        score: 0,
        begin: "",
        end: "",
        worker_id:''
      },
      tabsList: [
        {
          name: "全部",
          id: 0,
        },
        {
          name: "好评",
          id: 3,
        },
        {
          name: "中评",
          id: 2
        },
        {
          name: "差评",
          id:1
        },
      ],
    };
  },
  onLoad(opi) {
    if(opi.id) this.searchForm.worker_id = opi.id
    this.loadData();
  },
  onShow() {},
  methods: {
    async loadData(reset, fn) {
      if (reset) {
        let { pageData } = this.$options.data();
        this.pageData = pageData;
      }
      if (this.pageData.loadmoreStatus == "nomore") return;
      let formData = {
        page: this.pageData.page,
        ...this.searchForm,
      };
      const res = await commentList(formData, true);
      this.pageData.list.push(...res.data.list);
      this.pageData.loadmoreStatus =
        res.data.totalCount <= this.pageData.list.length
          ? "nomore"
          : "loadmore";
      this.pageData.page++;
      fn && fn();
    },
    resetSearch() {
      this.searchForm = this.$options.data().searchForm;
      this.loadData(true);
    },
  },
  computed: {},
  watch: {},
  onReachBottom() {},
  onPullDownRefresh() {},
};
</script>
<style lang="scss" scoped>
ul {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
  }
}
.page-body {
  height: 100vh;
  .goods-scroll {
    flex: 1;
    height: 0;
    background: #f2f2f2;
    padding: 0 24rpx 24rpx;

    .goods-item {
      margin-bottom: 24rpx;
      padding: 24rpx;
      border-radius: 20rpx;
      background: #fff;
      .user-img {
        > image {
          width: 58rpx;
          height: 58rpx;
          border-radius: 50%;
          margin-right: 14rpx;
          background: #fdf1f2;
        }
      }
      .goods-xing {
        .icon-shu {
          height: 20rpx;
          width: 1px;
          background: #999;
          margin: 0 10rpx;
        }
        .icon-collection-fill {
          font-size: 30rpx;
          width: 30rpx;
          height: 30rpx;
          line-height: 30rpx;
          color: #f84e18;
        }
      }
      .goods-content {
        padding: 24rpx 0;
        font-size: 24rpx;
        line-height: 2;
      }
      .goods-pics {
        > image {
          width: 160rpx;
          height: 160rpx;
          border-radius: 12rpx;
          background: #f2f2f2;
          margin-right: 4rpx;
          margin-top: 10rpx;
          &:nth-child(4n) {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
